<template>
  <div class="optioncard">
    <!-- 默认选项卡 -->
    <section
      v-if="!datas.optionList || !datas.optionList[0]"
      class="defaultNavigation"
      :style="{display: datas.textStyle === 0?'flex':'-webkit-box', 'overflow-x': datas.textStyle === 0?'':'scroll'}">
      <!-- 导航样式一 -->
      <div class="navigationList" v-if="datas.commodityType === 0">
        <div 
          v-for="index in 4" 
          :key="index" 
          class="commodityType commodityType0" 
          :style="{ width: datas.textStyle === 0 ? 'auto' : 375 / datas.showSize + 'px' }">
          <div class="navlist">
            <!-- 文字 -->
            <p :class="{ active: isActive === index }" @click="changeClass(index)">选项卡</p>
          </div>
        </div>
      </div>
      <!-- 导航样式二 -->
      <div class="navigationList" :style="{'background-color': datas.twoBackgColor}" v-else-if="datas.commodityType === 1">
        <div 
          v-for="index in 4" 
          :key="index" 
          class="commodityType commodityType1" 
          :style="{ width: datas.textStyle === 0 ? 'auto' : 375 / datas.showSize + 'px' }">
          <div class="navlist">
            <!-- 文字 -->
            <p :class="{ active: isActive === index }" @click="changeClass(index)">选项卡</p>
          </div>
        </div>
      </div>
      <div class="navigationList" v-else>
        <div 
          v-for="index in 4" 
          :key="index" 
          class="commodityType commodityType0" 
          :style="{ width: datas.textStyle === 0 ? 'auto' : 375 / datas.showSize + 'px' }">
          <div class="navlist">
            <!-- 文字 -->
            <p :class="{ active: isActive === index }" @click="changeClass(index)">选项卡</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 导航列表 -->
    <section
      v-else
      class="defaultNavigation"
      :style="{
        background: datas.backgroundColor,
        display: datas.textStyle === 0 ? 'flex' : '-webkit-box',
        'flex-wrap': datas.textStyle === 0 ? 'wrap' : 'nowrap',
        'justify-content': datas.textStyle === 0 ? 'space-evenly' : 'space-around',
        'overflow-x': datas.textStyle === 0 ? '' : 'scroll'}">
      <div class="navigationList" v-if="datas.commodityType === 0">
        <!-- 导航 -->
        <div
          v-for="(item, index) in datas.optionList"
          :key="index"
          class="commodityType commodityType0"
          :style="{ width: datas.textStyle === 0 ? '25%' : 375 / datas.showSize - 1 + 'px' }">
          <div class="navlist">
            <img v-if="item.pictureUrl" :src="item.pictureUrl" alt="">
            <p v-else :style="{ 'font-size': datas.textSize + 'px' }" :class="{active: isActive === index}" @click="changeClass(index)">{{ item.name }} </p>
          </div>
        </div>
      </div>
      <div class="navigationList" :style="{'background-color': datas.twoBackgColor}" v-else-if="datas.commodityType === 1">
        <!-- 导航 -->
        <div
          v-for="(item, index) in datas.optionList"
          :key="index"
          class="commodityType commodityType1"
          :style="{ width: datas.textStyle === 0 ? '25%' : 375 / datas.showSize - 1 + 'px' }">
          <div class="navlist">
            <img v-show="item.pictureUrl" :src="item.pictureUrl" alt="">
            <p :style="{ 'font-size': datas.textSize + 'px' }" :class="{active: isActive === index}" @click="changeClass(index)">{{ item.name }} </p>
          </div>
        </div>
      </div>
      <div class="navigationList" v-else>
        <!-- 导航 -->
        <div
          v-for="(item, index) in datas.optionList"
          :key="index"
          class="commodityType commodityType0"
          :style="{ width: datas.textStyle === 0 ? '25%' : 375 / datas.showSize - 1 + 'px' }">
          <div class="navlist">
            <img v-if="item.pictureUrl" :src="item.pictureUrl" alt="">
            <p v-else :style="{ 'font-size': datas.textSize + 'px' }" :class="{active: isActive === index}" @click="changeClass(index)">{{ item.name }} </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: 'Optioncard',
  props: {
    datas: Object
  },
  data() {
    return {
      isActive: 0
    }
  },
  created() {
    console.log(this.datas, '--------optioncard')
  },
  methods: {
    changeClass(i) {
      this.isActive = i
    }
  }
}
</script>

<style scoped lang="scss">
.optioncard {
  position: relative;
  .defaultNavigation {
    // overflow-x: scroll;
    justify-content: space-evenly;
    &::-webkit-scrollbar {
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #00a0e9;
    }
    .el-collapse-item__header,
    .el-collapse-item__wrap {
      border-bottom: 0 !important;
    }
    /* 导航 */
    .navigationList {
      display: flex;
      // flex-direction: column;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      .commodityType{
        cursor: pointer;
        &.commodityType0{
          .navlist{
            display: flex;
            align-items: center;
            p {
              font-size: 14px;
              // width: 100%;
              width: 90px;
              height: 40px;
              line-height: 40px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: center;
              box-sizing: border-box;
              color: rgba(0, 0, 0, 0.6);
            }
            img{
              width:50px;
              height:30px;
            }
            .active{
              color: #000000;
              font-weight: 600;
              background: url('../../../assets/images/navbg.png') no-repeat;
              background-size: 18px 5px;
              background-position: center 35px;
              height: 40px;
              line-height: 40px;
            }
          }
        }
        &.commodityType1{
          display: flex;
          align-items: center;
          .navlist{
            width: 100%;
            p{
              font-size: 14px;
              font-weight: bold;
              // width: 93px;
              // height: 30px;
              // margin-right: 5px;
              line-height: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: center;
              // box-sizing: border-box;
              // border: 2px solid #ffffff;
              // border-radius: 30px;
              // color: #ffffff;
              color: rgba(255, 246, 169, 0.6);
              padding: 0 10px;
            }
            img{
              width:50px;
              height:30px;
            }
            .active{
              // background: linear-gradient(180deg, #FFAB45 0%, #FE8922 100%);
              // box-shadow: 0px 3px 0px 0px #EE9D3B;
              // border-radius: 30px;
              // height: 40px;
              // border: 4px solid;
              font-size: 16px;
              color: rgba(255, 246, 169, 1);
              border-bottom: 3px solid #FFF6A9;
            }
          }
        }
      } 
    }
  }
}
</style>
